<template>
	<div class="pay-container">
		<!-- 生成微信支付二维码 -->
		<div class="erwei">
			<img :src="payUrl"
				alt="">
		</div>
		<svg class="icon"
			aria-hidden="true">
			<use xlink:href="#icon-wechat_pay"></use>
		</svg>
		<span>使用微信进行支付</span>
		<el-descriptions title="订单详情">
			<el-descriptions-item label="订单号">{{orderDetail.order_id}}</el-descriptions-item>
			<el-descriptions-item label="创建时间">{{orderDetail.create_time}}</el-descriptions-item>
			<el-descriptions-item label="产品名称">{{orderDetail.orderDetail[0].productName}}</el-descriptions-item>
			<el-descriptions-item label="商品描述">{{orderDetail.orderDetail[0].description}}</el-descriptions-item>
			<el-descriptions-item label="购买数量">{{orderDetail.orderDetail[0].quantity}}</el-descriptions-item>
			<el-descriptions-item label="购买用户">{{userInfo.nickname}}</el-descriptions-item>
			<el-descriptions-item label="手机号">{{userInfo.phone?userInfo.phone:"没有手机号码"}}</el-descriptions-item>
			<el-descriptions-item label="总价格">
				{{orderDetail.total_fee}}
			</el-descriptions-item>

		</el-descriptions>

	</div>
</template>
<script>
	//首先要获取订单id
	import * as api from "../../../../api"
	import { mapState } from "vuex"
	import qrCode from "qrcode";
	export default {
		data() {
			return {
				//请求的订单详情
				orderDetail: {//数据初始化 
					orderDetail: [{
						productName: "",
						description: "",
						quantity: ""
					}]
				},
				payUrlRes: {},//请求获取的支付结果
				payUrl: "" //支付地址
			}
		},
		computed: {
			...mapState(['order_id', "userInfo"])
		},
		created() {
			//3.如果用户刷新了当前页面,本次交易取消,我们需要让用户重新提交交易
			if (!this.order_id) {
				//没有订单id 有可能用户刷新了页面
				//提示:本次交易取消,返回到预支付页面
				this.$alert('本次交易取消,请重新提交', '提示', {
					confirmButtonText: '确定',
					callback: action => {
						this.$router.push({ name: "pre_order" })
					}
				});

				return
			}
			//1.根据订单id 请求订单详情
			//2.根据订单id 获取微信支付地址,=>我们获取地址之后,生成二维码


			//并发请求
			Promise.all([api.getOrderDetailApi(this.order_id), api.getPayUrlApi(this.order_id)])
				.then(res => {
					let orderDetail = res[0].data.data;//订单的详情
					let payUrlRes = res[1].data//订单的支付地址

					this.orderDetail = orderDetail;
					// this.payUrlRes = payUrlRes;
					//获取支付的二维码地址

					//调用生成二维码地址的方法
					// payUrlRes.code_url 就是微信支付返回的支付地址
					//通过支付地址 生成二维码图片地址
					qrCode.toDataURL(payUrlRes.code_url, (err, dataUrl) => {
						// console.log(dataUrl);
						this.payUrl = dataUrl; //生成一个二维码的图片地址
					});
				})
				.catch(err => {
					console.log(err);
				})


			//轮询 查询支付状态
			//轮询的时候,一定要设置时间
			//设置200ms
			this.queryPayStatusInterval = setInterval(() => {
				console.log('轮询只在执行');
				api.queryPayResultApi(this.order_id)
					.then(res => {
						if (res.data.state) {
							//订单已经支付成功

							//清除定时器
							clearInterval(this.queryPayStatusInterval)
							//跳转到支付成功的页面
							this.$router.push({ name: "paySuccess" })
						}
					})
			}, 400);
		},
		beforeDestroy() {
			//组件即将销毁的时候
			//清除定时器
			clearInterval(this.queryPayStatusInterval)
		}
	}
</script>